<template>
    <div>
        <!--        顶部-->
        <div class="box">
            <!--        面包屑导航-->
            <el-breadcrumb class="top-20" separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>二手管理</el-breadcrumb-item>
                <el-breadcrumb-item>二手商品管理</el-breadcrumb-item>
            </el-breadcrumb>
            <ul class="top">
<!--                <li>-->
<!--                    <div class="bt-red" @click="del"><i class="el-icon-delete">删除</i></div>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <div class="bt-blue" @click="dialogFormVisible = true"><i class="el-icon-edit">添加</i></div>-->
<!--                </li>-->
                <li class="check">商品搜索</li>

                <li>
                    <el-input class="check-input" v-model="input" placeholder="关键字"></el-input>
                </li>
                <li>
                    <div class="check-bt" @click="ck">搜索</div>
                </li>
            </ul>
        </div>
        <!--        列表-->
        <div class="list">
            <el-table
                    ref="multipleTable"
                    :data="tableData"
                    tooltip-effect="dark"
                    border
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="产品编号"
                        width="80"
                        :resizable="false">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="产品名称"
                        width="155"
                        :resizable="false">
                </el-table-column>
                <el-table-column
                        prop="image"
                        label="浏览"
                        width="80"
                        :resizable="false">
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="产品现价"
                        width="80"
                        :resizable="false">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="分类"
                        width="80"
                        :resizable="false">
                </el-table-column>
<!--                <el-table-column-->
<!--                        prop="count"-->
<!--                        label="数量"-->
<!--                        width="80"-->
<!--                        :resizable="false">-->
<!--                </el-table-column>-->
                <el-table-column
                        prop="inserttime"
                        label="添加日期"
                        width="130"
                        :resizable="false">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="80"
                        :resizable="false">
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="80"
                        :resizable="false">
                    <template slot-scope="scope">
                        <el-button
                                @click="dialogVisible = true,set(scope.$index)"
                                type="text"
                                size="small">
                            修改状态
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog title="新增" :visible.sync="dialogFormVisible" width="30%">
            <el-form :model="form">
                <el-form-item label="产品编号" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" width="60px"></el-input>
                </el-form-item>
                <el-form-item label="产品名称" :label-width="formLabelWidth">
                    <img :src=form.mingcheng>
<!--                    <el-input v-model="form.mingcheng" autocomplete="off"></el-input>-->
                </el-form-item>
                <el-form-item label="产品现价" :label-width="formLabelWidth">
                    <el-input v-model="form.xianjia" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="产品分类" :label-width="formLabelWidth">
                    <el-input v-model="form.fenlei" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth">
                    <el-input v-model="form.shuliang" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-input v-model="form.zhuangtai" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="newpr">确 定</el-button>
            </div>
        </el-dialog>

<!--        <el-dialog-->
<!--                title="修改信息"-->
<!--                :visible.sync="dialogVisible"-->
<!--                width="30%"-->
<!--                :before-close="handleClose">-->
<!--            <div> 产品编号：<input class="input-id" v-model="proform.proid" type="text" placeholder="超级管理员拥有管理权限"></input>-->
<!--            </div>-->
<!--            <div class="top20"> 产品名称：<input class="input-id" v-model="proform.proname" type="text"></input></div>-->
<!--            <div class="top20">浏览：<img class="img" :src="proform.look" alt="">-->
<!--                <button class="but">修改图片</button>-->
<!--            </div>-->
<!--            <div class="top20">产品现价 <input v-model="proform.proprice" class="input-sm"-->
<!--                                           type="text"></input>&nbsp;分类：<input v-model="proform.procl" class="input-sm">-->
<!--            </div>-->
<!--            <div class="top20">数量/台：<input v-model="proform.procount" class="input-sm" type="text">&nbsp;状态：<input-->
<!--                    v-model="proform.prostatus" class="input-sm"></div>-->
<!--            <span slot="footer" class="dialog-footer">-->
<!--                <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="dialogVisible = false; setover()">确定修改</el-button>-->

<!--  </span>-->
<!--        </el-dialog>-->
        <!--分页-->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage1"
                    :page-size="5"
                    layout="total, prev, pager, next, jumper"
                    :total="count1">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ProManagerController",
        data() {
            return {
                form: {
                    name: '',
                    mingcheng: '',
                    xianjia: '',
                    fenlei: '',
                    shuliang: '',
                    zhuangtai: ''

                },
                dialogTableVisible: false,
                dialogFormVisible: false,
                formLabelWidth: '100px',
                delIds: "",
                updateId: '',//商品id
                page: '',//分页页码
                limit: '',//每页记录数
                newlist: '',
                dialogVisible: false,
                newpro: false,
                currentPage1: 1,
                input: '',
                imge: '',
                // modifyindex: '',//存储修改的index索引
                tableData: [],
                // [{
                //     id: '1000001',
                //     name: '小米黑色版3GB+3',
                //     imgurl: '/img/hlogo.jpg',
                //     price: '668元',
                //     classification: '手机',
                //     count: '100',
                //     date: '2015-04-25',
                //     status: '在售',
                // }, {
                //     id: '1000001',
                //     name: '小米黑色版3GB+32GB',
                //     imgurl: '/img/hlogo.jpg',
                //     price: '668元',
                //     classification: '手机',
                //     count: '100',
                //     date: '2015-04-25',
                //     status: '无货',
                // }],
                proform: {
                    proid: '',
                    proname: '',
                    look: '',
                    proprice: '',
                    procl: '',
                    procount: '',
                    prostatus: ''
                },
                list: '',
                kong: [],
                count1: 0,
                indexid: [],
                chushi: "5",
                tid:''
            }
        },
        created: function () {
            this.$axios({
                method: 'post',
                url: '/api/product/all',
                data: this.qs.stringify({
                    page: 1,
                    limit: 10,
                })
            }).then(res => {
                console.log(res)
                this.tableData = res.data.productlist
                this.count1=res.data.count
                // console.log(this.tableData)

                for (let i=0;i<this.tableData.length;i++) {
                    if (res.data.productlist[i].display===1){
                        this.tableData[i].status='上架'
                    } else {
                        this.tableData[i].status='下架'
                    }
                }
            }).catch(err => {
                console.log("catch里的错误")
            });
        },
        methods: {
            ck() {
                this.$axios({
                    method: 'post',
                    url: '/api/product/search',
                    data: this.qs.stringify({
                        name: this.input,
                        page: 1,
                        limit: 10,
                        // display:1
                    })
                }).then(res => {
                    console.log("查询", res);
                    this.tableData = res.data.productlist
                    this.count1=res.data.count
                    for (let i=0;i<this.tableData.length;i++) {
                        if (res.data.productlist[i].display===1){
                            this.tableData[i].status='上架'
                        } else {
                            this.tableData[i].status='下架'
                        }
                    }
                }).catch(err => {
                    console.log("catch里的错误")

                });
            },
            del() {
                console.log(this.kong)
                if (this.kong.length !== 0) {
                    let kongid = []
                    for (let i = 0; i < this.kong.length; i++) {
                        kongid = this.kong[i].id
                        console.log(kongid)
                    }
                    this.$axios({
                        method: 'delete',
                        url: '/api/proManager/delGoods',
                        params: {
                            delIds: kongid
                        }
                    }).then(res => {
                        console.log("删除", res.status);
                        if (res.status === 200) {
                            for (let j = 0; j < this.kong.length; j++) {
                                console.log(this.kong)
                                let a = this.tableData.indexOf(this.kong[j])
                                this.tableData.splice(a, 1)
                            }
                        }
                        this.$axios({
                            method: 'post',
                            url: '/api/proManager/goodsList',
                            data: this.qs.stringify({
                                page: '1',
                                limit: '5',
                            })
                        }).then(res => {
                            console.log(res)
                            // this.tableData = res.data.goodsList
                            // let zhuantai = res.data.goodsList
                            // this.src = res.data.goodsList.lmage
                            // this.count1 = res.data.count
                            // for (let i = 0; i < zhuantai.length; i++) {
                            //     if (zhuantai[i].status = 1) {
                            //         zhuantai[i].status = '在售'
                            //     } else {
                            //         zhuantai[i].status = '售空'
                            //     }
                            // }
                            if (res.data.status == 200) {
                                for (let j = 0; j < this.kongkong.length; j++) {
                                    let a = this.tableData.indexOf(this.kong[j])
                                    this.tableData.splice(a, 1)
                                }
                            }
                        }).catch(err => {
                            console.log("catch里的错误")
                        });


                    }).catch(err => {
                        console.log("catch里的错误")
                    });


                } else {
                    alert('选项不能为空')
                }
            },
            newpr() {
                console.log(this.form.name)
                this.$axios({
                    method: 'post',
                    url: '/api/product/onsell',
                    // headers:{'Content-type':'application/json'},
                    data: {
                        id:this.sid
                        // name: this.form.mingcheng,
                        // type: this.form.fenlei,
                        // price: this.form.xianjia,
                        // // image: this.form.,
                        // count: this.form.shuliang,
                        // salecount: this.form.zhuangtai
                    }
                }).then(res => {
                    this.dialogFormVisible = false
                    console.log("新增", res);
                    this.$axios({
                        method: 'post',
                        url: '/api/proManager/goodsList',
                        data: this.qs.stringify({
                            page: '1',
                            limit: '5',
                        })
                    }).then(res => {
                        console.log(res)
                        alert('添加成功')
                        this.tableData = res.data.goodsList
                        let zhuantai = res.data.goodsList
                        this.src = res.data.goodsList.lmage
                        this.count1 = res.data.total
                        for (let i = 0; i < zhuantai.length; i++) {
                            if (zhuantai[i].status = 1) {
                                zhuantai[i].status = '在售'
                            } else {
                                zhuantai[i].status = '售空'
                            }
                        }
                    }).catch(err => {
                        console.log("catch里的错误")
                    });


                }).catch(err => {
                    console.log("catch里的错误")
                });

            },
            set(index) {
                console.log(index)
                console.log(this.tableData[index].id)
                // this.indexid = index
                this.tid=this.tableData[index].id
                this.$axios({
                    method: 'post',
                    url: '/api/product/onsell',
                    data: this.qs.stringify({
                        id:this.tid
                    })
                }).then(res => {
                    console.log("修改前商品id", res);
                    this.$axios({
                        method: 'post',
                        url: '/api/product/all',
                        data: this.qs.stringify({
                            page: 1,
                            limit: 10,
                        })
                    }).then(res => {
                        console.log(res)
                        this.tableData = res.data.productlist
                        this.count1=res.data.count
                        // console.log(this.tableData)

                        for (let i=0;i<this.tableData.length;i++) {
                            if (res.data.productlist[i].display===1){
                                this.tableData[i].status='上架'
                            } else {
                                this.tableData[i].status='下架'
                            }
                        }
                    }).catch(err => {
                        console.log("catch里的错误")
                    });

                }).catch(err => {
                    console.log("catch里的错误")
                });
                // this.modifyindex = index;

                // // console.log(this.form)
            },
            setover(index) {
                // console.log(this.form)
                this.modifyindex=index
                this.$axios({
                    method: 'post',
                    url: '/api/proManager/sureUpdate',
                    // headers:{'Content-type':'application/json'},
                    data: {
                        // proid: '',
                        // proname: '',
                        // look: '',
                        // proprice: '',
                        // procl: '',
                        // procount: '',
                        // prostatus: ''
                        id: this.proform.proid,
                        name: this.proform.proname,
                        type: this.proform.procl,
                        price: this.proform.proprice,
                        // image: this.form.,
                        count: this.proform.procount,
                        salecount: this.proform.prostatus
                    }
                }).then(res => {
                    console.log("修改", res);
                    if (res.data.status==200) {
                        this.tableData[this.indexid].status = this.proform.prostatus
                        this.tableData[this.indexid].id = this.proform.proid
                        this.tableData[this.indexid].name = this.proform.proname
                        this.tableData[this.indexid].imgurl = this.proform.look
                        this.tableData[this.indexid].price = this.proform.proprice
                        this.tableData[this.indexid].classification = this.proform.procl
                        this.tableData[this.indexid].count = this.proform.procount

                    }


                }).catch(err => {
                    console.log("catch里的错误")
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {
                    });
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                console.log(this.chushi)
                this.$axios.post('/api/product/all',this.qs.stringify( {
                    page: val,
                    limit: this.chushi
                })).then(res => {
                    this.tableData = res.data.productlist
                    // let data = res.data.goodsList
                    // for (let i = 0; i < data.length; i++) {
                    //     if (data[i].status === 1) {
                    //         data[i].status = '在售'
                    //     } else {
                    //         data[i].status = '售空'
                    //     }
                    // }
                })

            },
            handleSelectionChange(val) {
                this.kong = val;
                console.log(this.kong)
            }
        }

    }
</script>

<style lang="less">
    .input-sm {
        width: 100px;
        height: 20px;
    }

    .but {
        margin-left: 20px;
    }

    .img {
        width: 100px;
        height: 100px;
        margin-left: 30px;
    }

    .top20 {
        margin-top: 10px;
    }

    .input-id {
        width: 200px;
        height: 25px;
    }

    .block {
        width: 200px;
        margin: 60px auto;
    }

    .box {
        width: 900px;
        height: 100px;
        border: 1px solid rgba(157, 157, 157, 0.34);
        margin: 0 auto;
    }

    .list {
        width: 900px;
        margin: 10px auto;

        > .el-table {
            text-align: center;
        }
    }

    .top-20 {
        margin-top: 20px;
        margin-left: 50px;
    }

    .check-input {
        margin-left: 10px;
    }

    .check {
        margin-left: 100px;
        margin-top: 8px;
    }

    .top {
        list-style: none;
        width: 100%;
        margin-top: 15px;
        margin-left: 40px;

        > li {
            float: left;
        }
    }

    .bt-red {
        background-color: red;
        color: white;
        cursor: pointer;
        width: 80px;
        height: 35px;
        line-height: 35px;
        border-radius: 7px;
        text-align: center;
    }

    .bt-blue {
        background-color: dodgerblue;
        color: white;
        cursor: pointer;
        width: 120px;
        height: 35px;
        line-height: 35px;
        border-radius: 7px;
        text-align: center;
        margin-left: 50px;
    }

    .check-bt {
        background-color: dodgerblue;
        color: white;
        cursor: pointer;
        width: 80px;
        height: 35px;
        line-height: 35px;
        border-radius: 7px;
        text-align: center;
        margin-left: 50px;
    }
</style>
